<template>

	<div style="height: 600px; display: flex;">

		<div style="height: 600px; width: 100%; font-size: 18px; ">

			<div style="margin:auto; display: flex; justify-content: space-around;">
				<a style="font-size: 2pc;">班级显示</a>
				<button v-on:click="go2add()">安排新课程</button>


				<div id="inputwin" v-show="bShow">
					<h2 align="center">安排新课程</h2>
					<hr />
					<table align="center">
						<tr>
							<td align="center">教师名称</td>
							<td>
						<select v-model="formObj.user"  style="width: 100%; font-size: 1pc;">
						<option align="center" v-for="tea in teas"  v-bind:value="tea" v-bind:selected="formObj.tid == tea.uid">
							{{tea.uname}}
						</option>
							</select>
							</td>
						</tr>
						
						<tr>
							<td align="center">课程名称</td>
							<td>
						<select v-model="formObj.clz" style="width: 100%; font-size: 1pc;">
						<option align="center"   v-for="clz in clzs" v-bind:value="clz" v-bind:selected="formObj.clzno == clz.clzno">
							{{clz.clzname}}
						</option>
						</select>
						</td>
						</tr>
						<tr>
						<td>班级名称</td>
							<td>
								<select v-model="formObj.course" style="width: 100%; font-size: 1pc;">
						<option align="center" v-for="course in courses" v-bind:value="course" v-bind:selected="formObj.cno == course.cno">
										{{course.cname}}
									</option>
								</select>
							</td>
						</tr>
					</table>
					<hr />
					<div style="display: flex; justify-content: space-between;">
						<p>&nbsp;</p>
						<p><button v-on:click="save()">确定</button></p>
						<p> <button v-on:click="saveout()">取消</button></p>

						<p>&nbsp;</p>
					</div>
				</div>
			</div>



			<table align="center" border="1px" style="width: 100%;">
				<tr>
					<th align="center">排课id</th>
					<th align="center">教师名称</th>
					<th align="center">班级名称</th>
					<th align="center">课程名称</th>
					<th colspan="2" align="center">功能</th>
				</tr>

				<tr v-for="(c,idx) in tasks">
					<td align="center">{{c.kid}}</td>
					<td align="center">{{c.user.uname}}</td>
					<td align="center">{{c.clz.clzname}}</td>
					<td align="center">{{c.course.cname}}</td>
					<td align="center"> <button v-on:click="del(c.kid)">删除</button></td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	export default {

		name: 'AdmTask',

		data() {
			return {
				formObj: {
					},
				clzs: [],
				tasks: [],
				courses: [],
				teas: [],
				bShow: false,
				actmsg: ['添加', '显示'],
				actidx: 1
			}
		},
		methods: {
			saveout() {
				this.bShow = false;
			},
			go2add() {
				this.actidx = 0;
				this.formObj = {
					kid:0,
					user:{},
					clz:{},
					course:{},
				};
				this.bShow = true;
				console.log(this.formObj)

			},
			del(c) {
				console.log(c);
				var that = this;
				const token = window.localStorage.getItem("token")

				this.$axios.get(`${this.$ip}/api/adm/task/del/`+c, {
					headers: {
						'Authorization': 'Bearer ' + token
					}
				}).then(function(resp) {
					
					that.tasks = resp.data.data

				})
			},
			save() {
				var that = this;
				console.log(this.$ip)
				console.log(that.formObj)
		
	          let fd=new FormData();
			  fd.append("user.uid",that.formObj.user.uid)
			  fd.append("clz.clzno",that.formObj.clz.clzno)
			  fd.append("course.cno",that.formObj.course.cno)
			  
				
				this.$axios.post(
					`${this.$ip}/api/adm/task/add`,
					fd,
					 {   
						 
						 headers: {'Content-Type':'application/json',
				 'Authorization': 'Bearer ' + window.localStorage.getItem("token")}
					
					}).then(function(resp) {
					that.bShow = false;
					console.log(resp.data);
					that.tasks = resp.data.data;
					// console.log(that.tasks);

				})
			}
		},

		mounted() {
			this.$axios.get(this.$ip + "/api/adm/task/findAll", {
				headers: {
					'Authorization': 'Bearer ' + window.localStorage.getItem("token")
				}
			}).then((resp) => {
				window.localStorage.getItem("token")
				console.log(resp.data.data)
				this.tasks = resp.data.data
			});

			this.$axios.get(this.$ip + "/api/public/getClzs").then((resp) => {
				console.log(resp.data.data)
				this.clzs = resp.data.data
			})

			this.$axios.get(this.$ip + "/api/public/getCourses").then((resp) => {
				console.log(resp.data.data)
				this.courses = resp.data.data
			})

			this.$axios.get(this.$ip + "/api/public/getTeachers").then((resp) => {
				console.log(resp.data.data)
				this.teas = resp.data.data
			})
		} // mounted

	}
</script>


<style scoped="scoped">
	#inputwin {
		border: 5px solid #2C3E50;
		position: absolute;
		text-align: center;
		z-index: 900;
		width: 40%;
		line-height: 50px;
		min-height: 15vw;

		transform: translateY(50%);

		left: 40%;
		top: 1vw;
		opacity: 0.9 !important;
		background-color: skyblue;
		color: #2C3E50;
		box-shadow: 3px 3px 3px #aaa;
	}

	#inputwin input {
		line-height: 27px;
		border-radius: 8px;
		width: 80%;
	}
</style>